<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>马斐斯珠宝</title>

  <!-- 图标信息 -->
  <link rel="icon" href="../assets/images/kind_bg1.png" />
  <link rel="apple-touch-icon" href="../assets/images/kind_bg1.png" />
  <meta name="msapplication-TileImage" content="../assets/images/kind_bg1.png" />

  <!-- 引入bootstrap -->
  <link rel="stylesheet" href="../assets/css/bootstrap.min.css">

  <!-- 引入动画库 -->
  <link rel="stylesheet" href="../assets/css/animate.min.css">

  <!-- 引入重置样式文件 -->
  <link rel="stylesheet/less" href="../assets/css/reset.less">

  <!-- 引入公共样式common.less -->
  <link rel="stylesheet/less" href="../assets/css/common.less">

  <!-- 引入help样式help.less -->
  <link rel="stylesheet/less" href="../assets/css/detail.less">
</head>

<body>

  <!-- 全部商品列表标题 -->
  <div class="goods_title">
    <div class="left"><a href="javascript:void(0);" class="glyphicon glyphicon-menu-left">返回</a></div>
    <div class="center">18K 金鑽石戒</div>
    <div class="right glyphicon glyphicon-option-vertical"></div>
  </div>

  <div class="detail">
    <div class="img">
      <img src="../assets/images/detail.png" alt="">
    </div>

    <div class="detail_info">
      <div class="title">【模板】18K金鑽石戒指</div>
      <div class="info">
        <p>飽滿的圓形戒托綴以多顆閃耀的美鑽，環抱著瑰麗耀眼的主石，把鑽石晶瑩剔透的光澤無限地放大，猶如情人以雙手把妳抱在懷中，讓無微不至的呵護一直圍繞著妳。</p>
        <div>
          <img src="../assets/images/shoucan.png" alt="">
          <span>收藏</span>
        </div>
      </div>
    </div>

    <div class="detail_oper">
      <div class="prices">
        <div class="wei">微信价：<span>10000</span></div>

        <div class="kind">
          <label for="kinds">镶嵌材料</label>
          <select name="kinds" id="kinds">
            <option value="bai">18K 白金镶嵌</option>
            <option value="huang">18K 黄金镶嵌</option>
          </select>
        </div>

        <div class="goods_num">
          <div>
            <span>数量</span>
            <span>(剩余 13621)</span>
          </div>
          <div>
            <button class="increase">+</button>
            <span class="num">1</span>
            <button class="decrease">-</button>
          </div>
        </div>
        <p>快递 免运费</p>
      </div>


      <div class="btns">
        <p>销量（<span>455</span>）件</p>
        <button>加入购物车</button>
        <button>我要帮购</button>
        <button>立即购买</button>
      </div>
    </div>

    <div class="line">
      <div></div>
    </div>
  </div>

  <div class="detail_list">
    <div class="btns_list">
      <div>商品属性</div>
      <div>图文详解</div>
      <div>评价</div>
    </div>
    <div class="info_list">
      <p>【模板】18K 金钻石婚戒/750 金钻石</p>
      <p>【模板】18K 金钻石婚戒/750 金钻石</p>
      <p>【模板】18K 金钻石婚戒/750 金钻石</p>
      <p>【模板】18K 金钻石婚戒/750 金钻石</p>
      <p>【模板】18K 金钻石婚戒/750 金钻石</p>
      <p>【模板】18K 金钻石婚戒/750 金钻石</p>
      <p>【模板】18K 金钻石婚戒/750 金钻石</p>
      <p>【模板】18K 金钻石婚戒/750 金钻石</p>
      <p>【模板】18K 金钻石婚戒/750 金钻石</p>
      <p>【模板】18K 金钻石婚戒/750 金钻石</p>
      <p>【模板】18K 金钻石婚戒/750 金钻石</p>
    </div>
  </div>



  <!-- 引入jquery -->
  <script src="../assets/js/jQuery.min.js"></script>

  <!-- 引入bootstrap.js -->
  <script src="../assets/js/bootstrap.min.js"></script>

  <!-- 引入less解析js -->
  <script src="../assets/js/less.min.js"></script>

  <!-- 引入懒加载js -->
  <script src="../assets/js/wow.min.repeat.js"></script>

  <script>
    window.onload = function () {
      var letfbtn = document.querySelector(".left");
      letfbtn.addEventListener("click", function () {
        window.history.back();
      })

      var increasebtn = document.querySelector(".increase");
      var decreasebtn = document.querySelector(".decrease");
      var num = document.querySelector(".num");
      var sum = parseInt(num.innerHTML);


      increasebtn.addEventListener("click", function () {
        sum++;
        num.innerHTML = sum;
      })

      decreasebtn.addEventListener("click", function () {

        if (sum <= 1) {
          return;
        }
        sum--;
        num.innerHTML = sum;
      })

    }
  </script>
</body>

</html>